<template>
  <div style="height: 100%; width: 100%">
    <el-row>
      <el-col :span="6">
        <el-statistic title="商家数量" :value="shopCount" />
      </el-col>
      <el-col :span="6">
        <el-statistic :value="senderCount">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              送货员数量
              <el-icon style="margin-left: 4px" :size="12"><Compass /></el-icon>
            </div>
          </template>
        </el-statistic>
      </el-col>
      <el-col :span="6">
        <el-statistic title="学生数量" :value="studentCount" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="订单数量" :value="orderCount">
          <template #suffix>
            <el-icon style="vertical-align: -0.125em">
              <Shop />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
    </el-row>
    <div ref="chart" id="chart" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { ChatLineRound, Male, Compass } from "@element-plus/icons-vue";
import axios from "axios";
import * as echarts from "echarts";

const shopCount = ref(0);
const studentCount = ref(0);
const senderCount = ref(0);
const orderCount = ref(0);
const token = localStorage.getItem("order_auth_token");

const getShopSize = () => {
  axios
    .get("/api/shop/size", { headers: { token: token } })
    .then((res) => {
      if (res.data.success) {
        shopCount.value = res.data.message;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const getStudentCount = () => {
  axios
    .get("/api/auth/student/count", { headers: { token: token } })
    .then((res) => {
      studentCount.value = res.data.message;
    })
    .catch((err) => {
      console.log(err);
    });
};

const getOrderCount = () => {
  axios
    .get("/api/auth/order/count", { headers: { token: token } })
    .then((res) => {
      orderCount.value = res.data.message;
    })
    .catch((err) => {
      console.log(err);
    });
};

const getSenderCount = () => {
  axios
    .get("/api/auth/sender/count", { headers: { token: token } })
    .then((res) => {
      senderCount.value = res.data.message ? res.data.message : 0;
    })
    .catch((err) => {
      console.log(err);
    });
};

const getInfo = () => {
  getOrderCount();
  getStudentCount();
  getShopSize();
  getSenderCount();
};
getInfo();

const chart = ref<echarts.ECharts | null>(null);

// 在 mounted 钩子函数中，初始化图表并渲染
onMounted(() => {
  // 获取 echarts 容器
  const chartContainer = document.getElementById("chart") as HTMLElement;
  // 初始化 echarts
  chart.value = echarts.init(chartContainer);

  // 创建图表配置项
  const option: any = {
    // 在这里填入你的图表配置项
    title: {
      text: "可视化",
      subtext: "数据统计",
    },
    // 举例：简单的柱状图
    xAxis: {
      type: "category",
      data: ["商家数量", "送货员数量", "学生数量", "订单数量"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [shopCount.value, senderCount.value, studentCount.value, orderCount.value],
        type: "bar",
      },
    ],
  };

  // 使用 setOption 方法将配置项应用到图表中
  chart.value.setOption(option);

  // 监听响应式数据的变化，当数据发生变化时更新图表
  watch([shopCount, senderCount, studentCount, orderCount], () => {
    const option: any = {
      // 更新图表数据
      series: [
        {
          data: [
            shopCount.value,
            senderCount.value,
            studentCount.value,
            orderCount.value,
          ],
        },
      ],
    };
    // 重新渲染图表
    chart.value?.setOption(option);
  });
});
</script>

<style scoped>
.el-col {
  text-align: center;
}
</style>
